<template>
    <van-sticky>
        <van-search v-model="searchKey" show-action placeholder="请输入反馈内容" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
    </van-sticky>

    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="news-list">
            <div class="news-item" v-for="(item, index) in newsList" :key="item.id">
                <div class="title">{{ index + 1 }}. {{ item.content }}</div>
                <div style="text-align: right;font-size: 12px;">创建时间：{{ item.createTime }}</div>
                <div class="title" style="text-indent: 1rem;margin-top: 10px;">回复：{{ item.result || '暂无回复' }}</div>

            </div>
        </div>
    </van-list>
    <!-- 悬浮按钮Start -->
    <div class="fixed-wrap">
        <div class="fixed-icon" @click="handleAdd">
            <van-icon name="add" size="50" color="#1989fa" />
        </div>
    </div>
    <!-- 悬浮按钮End -->
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import Api from '@/api/homePage.js';

const router = useRouter();

//列表
let newsList = reactive([]);

const loading = ref(false);
const finished = ref(false);
const pageNo = ref(1);
const pageSize = ref(10);

const onLoad = () => {
    // 异步更新数据
    Api.feedbackList({
        pageNo: pageNo.value,
        pageSize: pageSize.value,
        content: searchKey.value,
        createById: localStorage.getItem('userId'),
        status: 1
    }).then(res => {
        if (pageNo.value === 1) {
            newsList = []
        }
        newsList.push(...res.data.list);

        if (newsList.length >= res.data.count) {
            finished.value = true;
        } else {
            pageNo.value++;
        }
    }).catch(() => {
        // 加载状态结束
        loading.value = false;
        finished.value = true;
    })
};
//搜索
const searchKey = ref('');
const onSearch = (val) => Toast(val);
const onClickButton = () => {
    pageNo.value = 1;
    finished.value = false;
    onLoad();
};

//新增
const handleAdd = (row) => {
    router.push({
        name: 'addFeedback'
    })
}

onMounted(() => {
    // 请求数据
    // getNewsList();
})

</script>

<style lang="scss" scoped>
.news-list {
    padding: 0 10px;

    .news-item {
        padding: 10px 0;
        border-bottom: 1px solid #eeeeee;
    }

    .title {
        font-size: 16px;
        color: #1E1F24;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
    }
}

.fixed-wrap {
    position: fixed;
    top: 80%;
    right: 20px;

    .fixed-icon {
        margin-bottom: 20px;
    }
}
</style>